<!DOCTYPE html>
<html>
    <head>
        <title>Your Admin Panel</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        
        <!-- Reset all CSS rule -->
        <link rel="stylesheet" href="css/reset.css" />
        
        <!-- Main stylesheed  (EDIT THIS ONE) -->
        <link rel="stylesheet" href="css/style.css" />
        
        <!-- jQuery AND jQueryUI -->
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>
        <link rel="stylesheet" href="css/jqueryui/jqueryui.css" />
        
        <!-- jWysiwyg - https://github.com/akzhan/jwysiwyg/ --->
        <link rel="stylesheet" href="js/jwysiwyg/jquery.wysiwyg.old-school.css" />
        <script type="text/javascript" src="js/jwysiwyg/jquery.wysiwyg.js"></script>
        
        
        <!-- Tooltipsy - http://tooltipsy.com/ -->
        <script type="text/javascript" src="js/tooltipsy.min.js."></script>
        
        <!-- iPhone checkboxes - http://awardwinningfjords.com/2009/06/16/iphone-style-checkboxes.html -->
        <script type="text/javascript" src="js/iphone-style-checkboxes.js"></script>
        <script type="text/javascript" src="js/excanvas.js"></script>
        
        <!-- Load zoombox (lightbox effect) - http://www.grafikart.fr/zoombox -->
        <script type="text/javascript" src="js/zoombox/zoombox.js"></script>
        <link rel="stylesheet" href="js/zoombox/zoombox.css" />
        
        <!-- Charts - http://www.filamentgroup.com/lab/update_to_jquery_visualize_accessible_charts_with_html5_from_designing_with/ -->
        <script type="text/javascript" src="js/visualize.jQuery.js"></script>
        
        <!-- Main Javascript that do the magic part (EDIT THIS ONE) -->
        <script type="text/javascript" src="js/main.js"></script>
    </head>
    <body class="wood dark">
            <div id="content" class="nosidebar">
                <h1><img src="img/icons/dashboard.png" alt="" />Introduction</h1>
                <div class="bloc left">
                    <div class="title">Introduction</div>
                    <div class="content">
                        <p>
                            Firstly I would like to thanks you for your purchase. 
                            If u have some questions or some ideas to make this theme better contact me using comments on ThemeForest. 
                            English is not my native language but I would try here to explain you how to use this theme. 
                            The best way to undertand how this template works is to look the source code but some elements need some explanations. 
                        </p>
                    </div>
                </div>
                <div class="bloc right">
                    <div class="title">Summary</div>
                    <div class="content">
                        <ol>
                            <li><a href="#basic">Basic structure</a></li>
                            <li><a href="#side">Sidebar</a></li>
                            <li><a href="#forms">Forms</a></li>
                            <li><a href="#charts">Charts</a></li>
                            <li><a href="#table">Table</a></li>
                            <li><a href="#notif">Notifications</a></li>
                            <li><a href="#alt">Alternate colors</a></li>
                        </ol>
                    </div>
                </div>
                
                <div class="cb"></div>
                
                <h1><img src="img/icons/posts.png" alt="" />Element Styling</h1>
                
                <div class="bloc" id="basic">
                    <div class="title">CSS Files and JS files</div>
                    <div class="content">
                        <p>The template is splitted using 3 CSS</p>
                        <ul>
                            <li><strong>reset.css</strong>, used to reset basic rules</li>
                            <li><strong>style.css</strong>, is the main CSS, if u want to do some modifications uses this file</li>
                            <li><strong>jqueryui/jqueryui.css</strong>, is the CSS used to style jQuery UI elements (this is the "Smoothless" jQuery UI theme, nothing changed on this file so if you want to update this file using the latest one from jQueryUI you can do it)</li>
                        </ul>
                        <p>And uses 8 Javascript Files (jQuery and jQueryUi are loaded from Google)</p>
                        <ul>
                            <li><strong>main.js</strong>, Main javascript File</li>
                            <li><strong>visualize.jQuery.js</strong>, used for charts <a href="http://www.filamentgroup.com/lab/update_to_jquery_visualize_accessible_charts_with_html5_from_designing_with/">Sources</a></li>
                            <li><strong>excanvas.js</strong>, used to emulate canvas for IE (canvas are only used for charts)</li>
                            <li><strong>iphone-style-checkboxes.js</strong>, iPhone style checkboxes <a href="http://awardwinningfjords.com/2009/06/16/iphone-style-checkboxes.html">Sources</a> </li>
                            <li><strong>jwysiwyg.js</strong>, Wysiwyg Editor for textarea <a href="https://github.com/akzhan/jwysiwyg/">Sources</a> </li>
                            <li><strong>tooltipsy.js</strong>, Tooltipsy used to add title over links <a href="http://tooltipsy.com/">Sources</a> </li>
                            <li><strong>zoombox/zoombox.js</strong>, Zoombox is a lightbox like plugin that I have developped that allows you to display with a nice zooming effect any kind of medias. It's quite easy to use, just add "zoombox" class on any link and it would work like a charm <a href="http://grafikart.fr/zoombox/">Sources</a> </li>
                            <li><strong>jquery.uniform.min.js</strong>, Uniform is used to style checkboxes, drop down menus, radio buttons and file upload inputs. <a href="http://uniformjs.com/">Sources</a> </li>
                        </ul>
                        
                        <p>Ressources used in that template</p>
                        <ul>
                            <li><a href="http://www.woothemes.com/2010/08/woocons1/">Woocons</a></li>
                            <li><a href="http://icondrawer.com/">Black & Blue Icons</a></li>
                        </ul>
                        
						<p>Sources</p>
						<ul>
							<li><strong>Checkbox.psd</strong>, PSD For checkboxes used for uniform</li>
							<li><strong>iconSweets2.psd</strong>, PSD Containing iconSweets2 icons (with layer style corresponding). Use this file to create new icons for Sidebar menu</li>
							<li><strong>RangeSlider.psd</strong>, PSD For range input</li>
						</ul>
						
                    </div>
                </div>
                
                <div class="bloc">
                    <div class="title">HTML Content</div>
                    <div class="content">
                        <p>The code is separated within 2 directories</p>
                        <ul>
                            <li><strong>Root directory</strong>, index.php contains the main structure (&lt;head&gt; with script and style import and basic html structure)</li>
                            <li>
                                <strong>Content directory</strong>, this is the main directory if you are looking for specific html elements, you'll find content that is inserted in the #content element.
                                Every file countains specific exemples (table, forms, typography...)
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="bloc">
                    <div class="title">Basic structure</div>
                    <div class="content">
                        <p>The code is quite easy to understand, the best way to understand how everything works is to look the source code. I you have some problems do not hesitate to comment the theme</p>
                    </div>
                </div>
                
                
                <h1><img src="img/icons/window.png" alt="" />Sidebar</h1>
                <div class="bloc" id="side">
                    <div class="title">Sidebar</div>
                    <div class="content">
                        <p>The sidebar menu structure is quite easy ul>li>ul>li... but there is some important classes : </p>
                        <ul>
                            <li>li.nosubmenu is used on menu without submenu</li>
                            <li>li.current is used for the current menu item (you can place it on the first li but also on the children li)</li>
                        </ul>
                    </div>
                </div>
                <h1><img src="img/icons/posts.png" alt="" />Forms</h1>
                <div class="bloc" id="forms">
                    <div class="title">Form Styling</div>
                    <div class="content">
                        <p>This is the most complete part of this template. Everything is designed to be easy to use and customize, The basic structure is :</p>
<pre>
&lt;div class=&quot;input&quot;&gt;
      &lt;label&gt;&lt;/label&gt;
      &lt;input /&gt;
&lt;/div&gt;
</pre>
                        <ul>
                            <li>You can use some additional classes depending of your input (.long, .medium, .checkbox)</li>
                            <li>
                                <strong>Errors</strong> : Adding an error for a specific input is quite easy, just add the "error" class on the div with input class (div.input.error) and use <em>&gt;span class="error-message"></em> to display additionnal informations concerning the error
                            </li>
                            <li><strong>Medium and Loooooooong text input</strong> : For text input you can use "medium" or "long" class</li>
                            <li><strong>Datepicker</strong> : It is amazingly easy, just add "datepicker" class on the input... nothing more to do :)</li>
                            <li>
                                <strong>Checkboxes and radio</strong> : The basic structure remains the same. 
                                If you want to put a label for a checkbox (on the right or left) add the "inline" class on label.
                            </li>
                            <li>
                                <strong>Range input</strong> : This input is a bit tricky, personnally I don't like to edit JS file everytime I want too change min or max value. So the javascript file looks for some specific classes.
                                Let's take an example. If u want a range value between 20 and 60 : <em>input class="range min-20 max-60" type="hidden"</em>, and that's all the script will do the magic part.
                                User &lt;span>&lt;/span> To choose where the value will be displayer on label.
                            </li>
                            <li>
                                <strong>Iphone style checkbox</strong> : Just add "iphone" class on the input <em>input type="checkbox" class="iphone"</em>, this styling doesn't trigger for Internet Explorer to avoid errors
                            </li>
                            <li>
                                <strong>WYSIWYG Textarea</strong> : Just add "wysiwyg" class on the input 
                            </li>
                            <li><strong>Submit</strong> : The submit input has to be in a div with "submit" class, div.submit>input. You have two fake submit classes (.button and .button.black)</li>
                        </ul>
                    </div>
                </div>
                
                <h1><img src="img/icons/chart.png" alt="" />Charts</h1>

                <div class="bloc" id="charts">
                    <div class="title">Charts</div>
                    <div class="content">
                        <p>
                            Charts are done using <a href="http://www.filamentgroup.com/lab/update_to_jquery_visualize_accessible_charts_with_html5_from_designing_with/">visualize</a>, it uses table content to generate charts. 
                        </p>
                        <p>
                            You can add a specific class to generate every kind of chart.<br/>
                            For instance <strong>table.chart.type-area</strong> would display an Area chart (types available :  'bar', 'area', 'pie', 'line'. If no type selected "bar" would be used.
                        </p>
                    </div>
                </div>
                
                
                <h1><img src="img/icons/window.png" alt="" />Table</h1>

                <div class="bloc" id="table">
                    <div class="title">Table</div>
                    <div class="content">
                        <p>
                           Table are styles using basic semantic code
                        </p>
                        <pre>
&lt;table&gt;
    &lt;thead&gt;
        &lt;tr&gt;
            &lt;td&gt;&lt;/td&gt;
            &lt;td&gt;&lt;/td&gt;
        &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
        &lt;tr&gt;
            &lt;td&gt;&lt;/td&gt;
            &lt;td&gt;&lt;/td&gt;
        &lt;/tr&gt;
    &lt;/tbody&gt;
&lt;/table&gt;
                        </pre>
                        <p>There is some specific class to style tables : </p>
                        <ul>
                            <li>"actions": Put this class on the td that contains action images (edit, delete...), it fixes the width of the cell and set right text-alignment</li>
                            <li>"picture": Put this class on the td that contains an image, it adds padding and border</li>
                            <li>"noalt": Put this class on a table if you don't want the alternative background effect</li>
                        </ul>
                    </div>
                </div>
                
                <h1><img src="img/icons/warning.png" alt="" />Notifications</h1>

                <div class="bloc" id="notif">
                    <div class="title">Notifications</div>
                    <div class="content">
                        <p>Here is the basic HTML Structure for a noficiation</p>
<pre>
&lt;div class=&quot;notif&quot;&gt;
    Your message goes here
    &lt;a href=&quot;#&quot; class=&quot;close&quot;&gt;&lt;/a&gt;
&lt;/div&gt;
</pre>      
                        <p>To define the error type just add another class (notif success, notif error, notif tip, notif info, notif warning)</p>
                    </div>
                </div>
                
                
                
                
                <h1><img src="img/icons/window.png" alt="" />Alternate Layouts</h1>

                <div class="bloc" id="alt">
                    <div class="title">Alternate Layouts</div>
                    <div class="content">
                        <p>There are alternate class that you can set on every element to customise the look and feel of this template.</p>
                        <ul>
                            <li>
                                <strong>body :</strong>
                                <ul>
                                    <li><strong>dark</strong> class is used to set a dark background (h1 will become white to match with dark backgrounds</li>
                                    <li><strong>wood</strong> class add a wooden background (the one you see on this documentation</li>
                                    <li><strong>white</strong> or no class for white background</li>
                                </ul>
                            </li>
                            <li>
                                <strong>#sidebar</strong>, there are 3 sidebars styles
                                <ul>
                                    <li><strong>grey</strong> class (or no class), it matches with white background</li>
                                    <li><strong>black</strong></li>
                                    <li><strong>white</strong></li>
                                </ul>
                            </li>
                            <li>
                                <strong>#content</strong>, There are 3 styles that are designed to customize bloc titles
                                <ul>
                                    <li><strong>Black</strong> </li>
                                    <li><strong>White</strong> </li>
                                    <li><strong>Wood</strong>, this is an old substyle. It can be usefull I think so I kept it, it can match specific needs</li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                </div>
                
                
                
            </div>
    </body>
</html>
